<template>
    <div style="background-color: white;height: calc(100% - 24px);margin: 12px;padding: 24px;border-radius: 10px">
        <el-tabs v-model="tab" class="demo-tabs">
            <el-tab-pane label="宇谷二维码" name="1">
                <div>
                    <el-form :model="form" ref="formRef" :rules="rules" style="margin: 20px;" label-width="80">
                        <el-form-item label="文本:" prop="input" style="flex-wrap: wrap">
                            <el-input placeholder="请输入" v-model="form.input" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item label="类型:" required>
                            <el-radio-group v-model="form.type">
                                <template v-for="(item, index) in types" :key="index">
                                    <el-radio-button :label="item.label" :value="item.value"/>
                                </template>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="自定义二维码" v-if="false" name="2">
                <div>
                    <el-form :model="form" ref="formRef" :rules="rules" style="margin: 20px;" label-width="80">
                        <el-form-item label="文本:" prop="input">
                            <el-input placeholder="请输入" style="width: 200px" v-model="form.input"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div v-if="showQrcode">
            <QrCode class="qrcode" ref="qrcodeRef" :value="qrcode.qrcode" :width="qrcode.width"
                    :color="qrcode.color"
                    :type="qrcode.type"></QrCode>
            <div>{{ qrcode.qrcode }}</div>
        </div>
        <div>
            <el-button @click="testRoute"> 路由跳转</el-button>
        </div>
    </div>

</template>

<script lang="ts" setup>
import QrCode from 'vue-qrcode'
import {onMounted, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";

let form = reactive({
    input: '202401180099',
    type: "1",
})
let tab = ref("1")
let showQrcode = ref(true)
let types = reactive([
    {
        label: "换电柜二维码",
        value: '1',
        fix: 'https://cshd.yusong.com.cn/cabinet_qrcode/index.htm?v='
    },
    {
        label: "电池二维码",
        value: '2',
        fix: 'https://cshd.yusong.com.cn/battery_qrcode/index.htm?v='
    },
    {
        label: "车辆二维码",
        value: '3',
        fix: 'https://fststing.chuq.com.cn/qlzl/qrcode/index.htm?v='
    }
])
let qrcode = reactive({
    qrcode: "",//202401180099 租车车辆二维码
    width: 300,
    color: {
        dark: '#000000ff', light: '#ffffffff'
    }, type: "image/png" as const
})

let rules = ref({
    input: [
        {required: true, message: '请输入', trigger: 'blur'}
    ],
})
watch(form, () => {
    update()
})
watch(tab, () => {
    update()
})
const u = useRouter()

function testRoute() {
    console.log("路由：")
    u.push({name: 'math'})
}

function update() {
    qrcode.qrcode = tab.value == '1' ? (types.find(item => item.value === form.type).fix + form.input) : form.input
    showQrcode.value = !!qrcode.qrcode
}

onMounted(() => {
    update()
})

</script>
<style scoped lang="scss">
</style>